<template>
  <div id="regionPage">
    <HeadNav
      type="publish"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="region"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <a-affix :offset-top="36">
              <div class="model-container">
                <div class="model-bg date-model" style="padding: 9px 15px">
                  <a-select
                    v-model="chooseYear"
                    style="width: 120px; margin-right: 10px"
                    @change="yearChange"
                  >
                    <a-select-option
                      :value="item.value"
                      v-for="(item, index) in yearList"
                      :key="index"
                      >{{ item.year }}</a-select-option
                    >
                  </a-select>
                  <span
                    class="region-btn"
                    :class="`${isAll == 1 ? 'active' : ''} ${
                      isAll == 2 ? 'disabled' : ''
                    }`"
                    @click="monthChange(0, null)"
                    >全年累计</span
                  >
                  <span
                    class="region-btn"
                    :class="`${item.active ? 'active' : ''} ${
                      item.disabled ? 'disabled' : ''
                    }`"
                    v-for="(item, index) in dateList"
                    :key="index"
                    @click="monthChange(item, index)"
                    >{{ item.date }}月</span
                  >
                </div>
              </div>
            </a-affix>
            <!-- 地域整体概况 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">地域整体概况</div>
                <div style="padding: 15px 0">
                  <div style="padding: 0 20px">
                    <div id="all-line-chart"></div>
                  </div>
                  <div style="margin-top: 30px">
                    <a-row type="flex" justify="space-between">
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="120" />
                              <col width="80" />
                              <col width="80" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>省份排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                                <td style="text-align: right">上月环比</td>
                                <td style="text-align: right">上年同比</td>
                              </tr>
                            </thead>
                            <tbody v-if="provinceList.length > 0">
                              <tr
                                v-for="(item, index) in provinceList"
                                :key="index"
                              >
                                <td>
                                  <span style="margin-right: 5px">{{
                                    item.rank
                                  }}</span>
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                                <td style="text-align: right">
                                  <span
                                    class="percent"
                                    v-if="item.pre_compare > 0"
                                    >{{ item.pre_compare }}% ↑</span
                                  >
                                  <span
                                    class="green"
                                    v-else-if="item.pre_compare < 0"
                                    >{{ item.pre_compare }}% ↓</span
                                  >
                                  <span v-else>--</span>
                                </td>
                                <td style="text-align: right">
                                  <span
                                    class="percent"
                                    v-if="item.last_compare > 0"
                                    >{{ item.last_compare }}% ↑</span
                                  >
                                  <span
                                    class="green"
                                    v-else-if="item.last_compare < 0"
                                    >{{ item.last_compare }}% ↓</span
                                  >
                                  <span v-else>--</span>
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="5" style="text-align: center">
                                  <div style="margin-top: 15px">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="120" />
                              <col width="80" />
                              <col width="80" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>城市排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                                <td style="text-align: right">上月环比</td>
                                <td style="text-align: right">上年同比</td>
                              </tr>
                            </thead>
                            <tbody v-if="cityList.length > 0">
                              <tr
                                v-for="(item, index) in cityList"
                                :key="index"
                              >
                                <td>
                                  <span style="margin-right: 5px">{{
                                    item.rank
                                  }}</span>
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                                <td style="text-align: right">
                                  <span
                                    class="percent"
                                    v-if="item.pre_compare > 0"
                                    >{{ item.pre_compare }}% ↑</span
                                  >
                                  <span
                                    class="green"
                                    v-else-if="item.pre_compare < 0"
                                    >{{ item.pre_compare }}% ↓</span
                                  >
                                  <span v-else>--</span>
                                </td>
                                <td style="text-align: right">
                                  <span
                                    class="percent"
                                    v-if="item.last_compare > 0"
                                    >{{ item.last_compare }}% ↑</span
                                  >
                                  <span
                                    class="green"
                                    v-else-if="item.last_compare < 0"
                                    >{{ item.last_compare }}% ↓</span
                                  >
                                  <span v-else>--</span>
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="5" style="text-align: center">
                                  <div style="margin-top: 15px">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <!-- 省份数据 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">省份数据</div>
                <div style="padding: 15px">
                  <a-row :gutter="15">
                    <a-col :span="12">
                      <div id="map" style="height: 390px; width: 100%"></div>
                    </a-col>
                    <a-col :span="12">
                      <div>
                        <a-dropdown placement="bottomLeft">
                          <a
                            class="ant-dropdown-link"
                            @click="(e) => e.preventDefault()"
                          >
                            <span
                              class="data-tab data-tab-night data-tab-big"
                              style="font-size: 14px"
                              >{{ provinceName ? provinceName : "--" }}</span
                            >
                            <span style="font-size: 16px; color: #07193f">
                              <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-btn-arrow" />
                              </svg>
                            </span>
                          </a>
                          <a-menu slot="overlay">
                            <a-menu-item
                              v-for="(item, index) in allProvinceList"
                              :key="index"
                            >
                              <a
                                href="javascript:;"
                                style="text-align: center; font-size: 12px"
                                @click="changeProveince(item)"
                                >{{ item.name }}</a
                              >
                            </a-menu-item>
                          </a-menu>
                        </a-dropdown>
                      </div>
                      <div class="city-briefing">
                        <ul>
                          <li>
                            全国销量排名第<span
                              class="data-tab data-tab-night data-tab-big"
                              >{{ provinceRank ? provinceRank : "--" }}</span
                            >名
                          </li>
                          <li>
                            销售指数<span
                              class="data-tab data-tab-night data-tab-big"
                              >{{
                                provinceInfo.sale_amount.toLocaleString()
                              }}</span
                            >，上月环比<span
                              class="data-tab data-tab-two data-tab-big"
                              v-if="provinceInfo.sale_pre_compare > 0"
                              >+{{ provinceInfo.sale_pre_compare }}%</span
                            >
                            <span
                              v-else-if="provinceInfo.sale_pre_compare < 0"
                              class="data-tab data-tab-three data-tab-big"
                              >{{ provinceInfo.sale_pre_compare }}%</span
                            >
                            <span
                              v-else
                              class="data-tab data-tab-two data-tab-big"
                              >--</span
                            >，较上年同比<span
                              class="data-tab data-tab-two data-tab-big"
                              v-if="provinceInfo.sale_last_compare > 0"
                              >+{{ provinceInfo.sale_last_compare }}%</span
                            >
                            <span
                              v-else-if="provinceInfo.sale_last_compare < 0"
                              class="data-tab data-tab-three data-tab-big"
                              >{{ provinceInfo.sale_last_compare }}%</span
                            >
                            <span
                              v-else
                              class="data-tab data-tab-two data-tab-big"
                              >--</span
                            >
                          </li>
                          <li>
                            全国占比<span
                              class="data-tab data-tab-night data-tab-big"
                              >{{ provinceInfo.ratio }}%</span
                            >，上月差值<span
                              class="data-tab data-tab-two data-tab-big"
                              v-if="provinceInfo.pre_ratio > 0"
                              >+{{ provinceInfo.pre_ratio }}%</span
                            >
                            <span
                              v-else-if="provinceInfo.pre_ratio < 0"
                              class="data-tab data-tab-three data-tab-big"
                              >{{ provinceInfo.pre_ratio }}%</span
                            >
                            <span
                              v-else
                              class="data-tab data-tab-two data-tab-big"
                              >--</span
                            >，较上年同期差值<span
                              class="data-tab data-tab-two data-tab-big"
                              v-if="provinceInfo.last_ratio > 0"
                              >+{{ provinceInfo.last_ratio }}%</span
                            >
                            <span
                              v-else-if="provinceInfo.last_ratio < 0"
                              class="data-tab data-tab-three data-tab-big"
                              >{{ provinceInfo.last_ratio }}%</span
                            >
                            <span
                              v-else
                              class="data-tab data-tab-two data-tab-big"
                              >--</span
                            >
                          </li>
                          <li>
                            城市排名
                            <div style="margin-top: 5px">
                              <span
                                class="data-tab data-tab-night data-tab-big"
                                v-for="(item, index) in provinceInfo.city_ranks"
                                :key="index"
                                >{{ item.rank }} {{ item.name }}
                                <span class="red" v-if="item.rank_compare > 0"
                                  ><a-icon type="caret-down" /></span
                                ><span
                                  class="green"
                                  v-if="item.rank_compare < 0"
                                  ><a-icon type="caret-up" /></span
                              ></span>
                            </div>
                          </li>
                          <li>
                            类目排名
                            <div style="margin-top: 5px">
                              <span
                                class="data-tab data-tab-night data-tab-big"
                                v-for="(item, index) in provinceInfo.cate_ranks"
                                :key="index"
                                >{{ item.rank }} {{ item.name }}
                                <span class="red" v-if="item.rank_compare > 0"
                                  ><a-icon type="caret-down" /></span
                                ><span
                                  class="green"
                                  v-if="item.rank_compare < 0"
                                  ><a-icon type="caret-up" /></span
                              ></span>
                            </div>
                          </li>
                          <li>
                            销售走势
                            <div v-if="provinceLineData.length > 0">
                              <div style="margin-top: 5px" id="city-line"></div>
                            </div>
                            <div v-else class="no-data" style="padding: 40px 0">
                              暂无图表数据
                            </div>
                          </li>
                        </ul>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <!-- 一二线城市数据分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title clearfix">
                  <div class="float-left">一二线城市数据分析</div>
                  <div class="float-left" style="margin-left: 20px">
                    <a-tabs
                      :activeKey="oneCityTabKey"
                      @change="oneCityCallback"
                    >
                      <a-tab-pane key="1" tab="销售走势"></a-tab-pane>
                      <a-tab-pane key="2" tab="读者画像"></a-tab-pane>
                    </a-tabs>
                  </div>
                </div>
                <div style="padding: 15px 0" v-if="oneCityTabKey == 1">
                  <div class="clearfix" style="padding: 0 15px">
                    <div class="float-left">
                      <div class="data-block">
                        <div style="width: 120px">
                          <span class="secondary-font">销售指数</span>
                          <div class="data-font">
                            {{ oneInfo.sale_amount.toLocaleString() }}
                          </div>
                        </div>
                        <div style="width: 170px; margin-left: 15px">
                          <div class="clearfix" style="margin-top: 10px">
                            <span class="secondary-font float-left"
                              >上月环比</span
                            >
                            <span
                              class="red float-right"
                              v-if="oneInfo.sale_pre_compare > 0"
                              >+{{ oneInfo.sale_pre_compare }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="oneInfo.sale_pre_compare < 0"
                              >{{ oneInfo.sale_pre_compare }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                          <div class="clearfix">
                            <span class="secondary-font float-left"
                              >上年同期环比</span
                            >
                            <span
                              class="red float-right"
                              v-if="oneInfo.sale_last_compare > 0"
                              >+{{ oneInfo.sale_last_compare }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="oneInfo.sale_last_compare < 0"
                              >{{ oneInfo.sale_last_compare }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                        </div>
                      </div>
                      <div class="data-block" style="margin-top: 10px">
                        <div style="width: 120px">
                          <span class="secondary-font">占比</span>
                          <div class="data-font">
                            {{ oneInfo.ratio
                            }}<span class="small" v-if="oneInfo.ratio !== '--'"
                              >%</span
                            >
                          </div>
                        </div>
                        <div style="width: 170px; margin-left: 15px">
                          <div class="clearfix" style="margin-top: 10px">
                            <span class="secondary-font float-left"
                              >上月差值</span
                            >
                            <span
                              class="red float-right"
                              v-if="oneInfo.pre_ratio > 0"
                              >+{{ oneInfo.pre_ratio }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="oneInfo.pre_ratio < 0"
                              >{{ oneInfo.pre_ratio }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                          <div class="clearfix">
                            <span class="secondary-font float-left"
                              >上年同期差值</span
                            >
                            <span
                              class="red float-right"
                              v-if="oneInfo.last_ratio > 0"
                              >+{{ oneInfo.last_ratio }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="oneInfo.last_ratio < 0"
                              >{{ oneInfo.last_ratio }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="float-left">
                      <div
                        style="width: 680px; margin-left: 15px"
                        id="one-city-trend"
                      ></div>
                    </div>
                  </div>
                  <div style="margin-top: 15px">
                    <a-row type="flex" justify="space-between">
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="240" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>类目排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                              </tr>
                            </thead>
                            <tbody v-if="oneInfo.cate_ranks.length > 0">
                              <tr
                                v-for="(
                                  item, index
                                ) in oneInfo.cate_ranks.slice(0, 5)"
                                :key="index"
                              >
                                <td>
                                  <span
                                    style="display: inline-block; width: 20px"
                                    >{{ item.rank }}</span
                                  >
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="3" style="text-align: center">
                                  <div style="padding: 120px 0">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="240" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>城市排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                              </tr>
                            </thead>
                            <tbody v-if="oneInfo.city_ranks.length > 0">
                              <tr
                                v-for="(
                                  item, index
                                ) in oneInfo.city_ranks.slice(0, 5)"
                                :key="index"
                              >
                                <td>
                                  <span
                                    style="display: inline-block; width: 20px"
                                    >{{ item.rank }}</span
                                  >
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="3" style="text-align: center">
                                  <div style="padding: 120px 0">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div style="padding: 15px" v-if="oneCityTabKey == 2">
                  <div>
                    <a-row>
                      <a-col :span="12">
                        <div style="font-size: 12px">性别分布</div>
                        <div v-if="oneSexList.length > 0">
                          <div
                            id="ring1"
                            style="
                              width: 400px;
                              margin-top: 20px;
                              margin-left: 30px;
                            "
                          ></div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div style="font-size: 12px">年龄分布</div>
                        <div v-if="oneAgeList.length > 0">
                          <div
                            id="column1"
                            style="
                              width: 400px;
                              margin-left: 90px;
                              margin-top: 20px;
                            "
                          ></div>
                          <div class="column">
                            <a-row>
                              <a-col
                                :span="4"
                                v-for="(item, index) in oneAgeList"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                  <div>
                    <a-row>
                      <a-col :span="12">
                        <div style="font-size: 12px">近一年消费</div>
                        <div v-if="oneMoneyList.length > 0">
                          <div
                            id="money1"
                            style="
                              width: 266px;
                              margin-left: 90px;
                              margin-top: 20px;
                            "
                          ></div>
                          <div class="column" style="width: 270px">
                            <a-row type="flex" justify="space-around">
                              <a-col
                                v-for="(item, index) in oneMoneyList"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12"> </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <!-- 三四线城市数据分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title clearfix">
                  <div class="float-left">三四线城市数据分析</div>
                  <div class="float-left" style="margin-left: 20px">
                    <a-tabs
                      :activeKey="twoCityTabKey"
                      @change="twoCityCallback"
                    >
                      <a-tab-pane key="1" tab="销售走势"></a-tab-pane>
                      <a-tab-pane key="2" tab="读者画像"></a-tab-pane>
                    </a-tabs>
                  </div>
                </div>
                <div style="padding: 15px 0" v-if="twoCityTabKey == 1">
                  <div class="clearfix" style="padding: 0 15px">
                    <div class="float-left">
                      <div class="data-block">
                        <div style="width: 120px">
                          <span class="secondary-font">销售指数</span>
                          <div class="data-font">
                            {{ twoInfo.sale_amount.toLocaleString() }}
                          </div>
                        </div>
                        <div style="width: 170px; margin-left: 15px">
                          <div class="clearfix" style="margin-top: 10px">
                            <span class="secondary-font float-left"
                              >上月环比</span
                            >
                            <span
                              class="red float-right"
                              v-if="twoInfo.sale_pre_compare > 0"
                              >+{{ twoInfo.sale_pre_compare }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="twoInfo.sale_pre_compare < 0"
                              >{{ twoInfo.sale_pre_compare }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                          <div class="clearfix">
                            <span class="secondary-font float-left"
                              >上年同期环比</span
                            >
                            <span
                              class="red float-right"
                              v-if="twoInfo.sale_last_compare > 0"
                              >+{{ twoInfo.sale_last_compare }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="twoInfo.sale_last_compare < 0"
                              >{{ twoInfo.sale_last_compare }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                        </div>
                      </div>
                      <div class="data-block" style="margin-top: 10px">
                        <div style="width: 120px">
                          <span class="secondary-font">占比</span>
                          <div class="data-font">
                            {{ twoInfo.ratio
                            }}<span class="small" v-if="twoInfo.ratio !== '--'"
                              >%</span
                            >
                          </div>
                        </div>
                        <div style="width: 170px; margin-left: 15px">
                          <div class="clearfix" style="margin-top: 10px">
                            <span class="secondary-font float-left"
                              >上月差值</span
                            >
                            <span
                              class="red float-right"
                              v-if="twoInfo.pre_ratio > 0"
                              >+{{ twoInfo.pre_ratio }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="twoInfo.pre_ratio < 0"
                              >{{ twoInfo.pre_ratio }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                          <div class="clearfix">
                            <span class="secondary-font float-left"
                              >上年同期差值</span
                            >
                            <span
                              class="red float-right"
                              v-if="twoInfo.last_ratio > 0"
                              >+{{ twoInfo.last_ratio }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="twoInfo.last_ratio < 0"
                              >{{ twoInfo.last_ratio }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="float-left">
                      <div
                        style="width: 680px; margin-left: 15px"
                        id="two-city-trend"
                      ></div>
                    </div>
                  </div>
                  <div style="margin-top: 15px">
                    <a-row type="flex" justify="space-between">
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="240" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>类目排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                              </tr>
                            </thead>
                            <tbody v-if="twoInfo.cate_ranks.length > 0">
                              <tr
                                v-for="(
                                  item, index
                                ) in twoInfo.cate_ranks.slice(0, 5)"
                                :key="index"
                              >
                                <td>
                                  <span
                                    style="display: inline-block; width: 20px"
                                    >{{ item.rank }}</span
                                  >
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="3" style="text-align: center">
                                  <div style="padding: 120px 0">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="240" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>城市排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                              </tr>
                            </thead>
                            <tbody v-if="twoInfo.city_ranks.length > 0">
                              <tr
                                v-for="(
                                  item, index
                                ) in twoInfo.city_ranks.slice(0, 5)"
                                :key="index"
                              >
                                <td>
                                  <span
                                    style="display: inline-block; width: 20px"
                                    >{{ item.rank }}</span
                                  >
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="3" style="text-align: center">
                                  <div style="padding: 120px 0">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div style="padding: 15px" v-if="twoCityTabKey == 2">
                  <div>
                    <a-row>
                      <a-col :span="12">
                        <div style="font-size: 12px">性别分布</div>
                        <div v-if="twoSexList.length > 0">
                          <div
                            id="ring2"
                            style="
                              width: 400px;
                              margin-top: 20px;
                              margin-left: 30px;
                            "
                          ></div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div style="font-size: 12px">年龄分布</div>
                        <div v-if="twoAgeList.length > 0">
                          <div
                            id="column2"
                            style="
                              width: 400px;
                              margin-left: 90px;
                              margin-top: 20px;
                            "
                          ></div>
                          <div class="column">
                            <a-row>
                              <a-col
                                :span="4"
                                v-for="(item, index) in twoAgeList"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                  <div>
                    <a-row>
                      <a-col :span="12">
                        <div style="font-size: 12px">近一年消费</div>
                        <div v-if="twoMoneyList.length > 0">
                          <div
                            id="money2"
                            style="
                              width: 266px;
                              margin-left: 90px;
                              margin-top: 20px;
                            "
                          ></div>
                          <div class="column" style="width: 270px">
                            <a-row type="flex" justify="space-around">
                              <a-col
                                v-for="(item, index) in twoMoneyList"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12"> </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <!-- 五线城市数据分析 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title clearfix">
                  <div class="float-left">五线城市数据分析</div>
                  <div class="float-left" style="margin-left: 20px">
                    <a-tabs
                      :activeKey="threeCityTabKey"
                      @change="threeCityCallback"
                    >
                      <a-tab-pane key="1" tab="销售走势"></a-tab-pane>
                      <a-tab-pane key="2" tab="读者画像"></a-tab-pane>
                    </a-tabs>
                  </div>
                </div>
                <div style="padding: 15px 0" v-if="threeCityTabKey == 1">
                  <div class="clearfix" style="padding: 0 15px">
                    <div class="float-left">
                      <div class="data-block">
                        <div style="width: 120px">
                          <span class="secondary-font">销售指数</span>
                          <div class="data-font">
                            {{ threeInfo.sale_amount.toLocaleString() }}
                          </div>
                        </div>
                        <div style="width: 170px; margin-left: 15px">
                          <div class="clearfix" style="margin-top: 10px">
                            <span class="secondary-font float-left"
                              >上月环比</span
                            >
                            <span
                              class="red float-right"
                              v-if="threeInfo.sale_pre_compare > 0"
                              >+{{ threeInfo.sale_pre_compare }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="threeInfo.sale_pre_compare < 0"
                              >{{ threeInfo.sale_pre_compare }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                          <div class="clearfix">
                            <span class="secondary-font float-left"
                              >上年同期环比</span
                            >
                            <span
                              class="red float-right"
                              v-if="threeInfo.sale_last_compare > 0"
                              >+{{ threeInfo.sale_last_compare }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="threeInfo.sale_last_compare < 0"
                              >{{ threeInfo.sale_last_compare }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                        </div>
                      </div>
                      <div class="data-block" style="margin-top: 10px">
                        <div style="width: 120px">
                          <span class="secondary-font">占比</span>
                          <div class="data-font">
                            {{ threeInfo.ratio
                            }}<span
                              class="small"
                              v-if="threeInfo.ratio !== '--'"
                              >%</span
                            >
                          </div>
                        </div>
                        <div style="width: 170px; margin-left: 15px">
                          <div class="clearfix" style="margin-top: 10px">
                            <span class="secondary-font float-left"
                              >上月差值</span
                            >
                            <span
                              class="red float-right"
                              v-if="threeInfo.pre_ratio > 0"
                              >+{{ threeInfo.pre_ratio }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="threeInfo.pre_ratio < 0"
                              >{{ threeInfo.pre_ratio }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                          <div class="clearfix">
                            <span class="secondary-font float-left"
                              >上年同期差值</span
                            >
                            <span
                              class="red float-right"
                              v-if="threeInfo.last_ratio > 0"
                              >+{{ threeInfo.last_ratio }}%</span
                            >
                            <span
                              class="green float-right"
                              v-else-if="threeInfo.last_ratio < 0"
                              >{{ threeInfo.last_ratio }}%</span
                            >
                            <span class="float-right" v-else>--</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="float-left">
                      <div
                        style="width: 680px; margin-left: 15px"
                        id="three-city-trend"
                      ></div>
                    </div>
                  </div>
                  <div style="margin-top: 15px">
                    <a-row type="flex" justify="space-between">
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="240" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>类目排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                              </tr>
                            </thead>
                            <tbody v-if="threeInfo.cate_ranks.length > 0">
                              <tr
                                v-for="(
                                  item, index
                                ) in threeInfo.cate_ranks.slice(0, 5)"
                                :key="index"
                              >
                                <td>
                                  <span
                                    style="display: inline-block; width: 20px"
                                    >{{ item.rank }}</span
                                  >
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="3" style="text-align: center">
                                  <div style="padding: 120px 0">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div class="table">
                          <table style="table-layout: fixed">
                            <colgroup>
                              <col width="240" />
                              <col width="100" />
                              <col width="100" />
                            </colgroup>
                            <thead>
                              <tr>
                                <td>城市排名前五名</td>
                                <td style="text-align: right">销售指数</td>
                                <td style="text-align: right">码洋占比</td>
                              </tr>
                            </thead>
                            <tbody v-if="threeInfo.city_ranks.length > 0">
                              <tr
                                v-for="(
                                  item, index
                                ) in threeInfo.city_ranks.slice(0, 5)"
                                :key="index"
                              >
                                <td>
                                  <span
                                    style="display: inline-block; width: 20px"
                                    >{{ item.rank }}</span
                                  >
                                  <span class="main-font">{{ item.name }}</span>
                                </td>
                                <td style="text-align: right">
                                  <span class="main-font">{{
                                    item.sale_amount.toLocaleString()
                                  }}</span>
                                </td>
                                <td style="text-align: right">
                                  {{ item.ratio }}%
                                </td>
                              </tr>
                            </tbody>
                            <tbody v-else>
                              <tr>
                                <td colspan="3" style="text-align: center">
                                  <div style="padding: 120px 0">
                                    <a-empty />
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div style="padding: 15px" v-if="threeCityTabKey == 2">
                  <div>
                    <a-row>
                      <a-col :span="12">
                        <div style="font-size: 12px">性别分布</div>
                        <div v-if="threeSexList.length > 0">
                          <div
                            id="ring3"
                            style="
                              width: 400px;
                              margin-top: 20px;
                              margin-left: 30px;
                            "
                          ></div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <div style="font-size: 12px">年龄分布</div>
                        <div v-if="threeAgeList.length > 0">
                          <div
                            id="column3"
                            style="
                              width: 400px;
                              margin-left: 90px;
                              margin-top: 20px;
                            "
                          ></div>
                          <div class="column">
                            <a-row>
                              <a-col
                                :span="4"
                                v-for="(item, index) in threeAgeList"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                  <div>
                    <a-row>
                      <a-col :span="12">
                        <div style="font-size: 12px">近一年消费</div>
                        <div v-if="threeMoneyList.length > 0">
                          <div
                            id="money3"
                            style="
                              width: 266px;
                              margin-left: 90px;
                              margin-top: 20px;
                            "
                          ></div>
                          <div class="column" style="width: 270px">
                            <a-row type="flex" justify="space-around">
                              <a-col
                                v-for="(item, index) in threeMoneyList"
                                :key="index"
                              >
                                <div class="column-num">{{ item.value }}%</div>
                                <div class="column-name">{{ item.name }}</div>
                              </a-col>
                            </a-row>
                          </div>
                        </div>
                        <div class="no-data" v-else>
                          数据量较小，暂不支持分析
                        </div>
                      </a-col>
                      <a-col :span="12"> </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <!-- 城市排名 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title clearfix">
                  <span class="float-left">城市排名</span>
                  <!-- <div class="float-left" style="margin-left: 15px">
                    <a-select
                      v-model="cityOption"
                      style="width: 220px"
                      @change="handleChange"
                    >
                      <a-select-option value="sale_amount"
                        >按销售指数排序</a-select-option
                      >
                      <a-select-option value="rank_compare"
                        >按排名变动排序</a-select-option
                      >
                      <a-select-option value="city"
                        >按城市线级排序</a-select-option
                      >
                    </a-select>
                  </div> -->
                </div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="45" />
                      <col width="60" />
                      <col width="200" />
                      <col width="320" />
                      <col width="120" />
                      <col width="100" />
                      <col width="100" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>-</td>
                        <td>城市</td>
                        <td>城市线级</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">码洋占比</td>
                        <td style="text-align: right">上期环比</td>
                        <td style="text-align: right">上年同比</td>
                      </tr>
                    </thead>
                    <tbody v-if="allCityList.length > 0">
                      <tr v-for="(item, index) in allCityList" :key="index">
                        <td>{{ item.rank }}</td>
                        <td>
                          <span class="green" v-if="item.rank_compare > 0"
                            ><a-icon type="caret-down" />
                            {{ item.rank_compare }}</span
                          >
                          <span
                            class="percent"
                            v-else-if="item.rank_compare < 0"
                            ><a-icon type="caret-up" />
                            {{ item.rank_compare * -1 }}</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td>
                          <span class="main-font">{{ item.name }}</span>
                        </td>
                        <td>{{ item.city_level }}</td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_amount.toLocaleString()
                          }}</span>
                        </td>
                        <td style="text-align: right">{{ item.ratio }}%</td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.pre_compare > 0"
                            >+{{ item.pre_compare }}%</span
                          >
                          <span class="green" v-else-if="item.pre_compare < 0"
                            >{{ item.pre_compare }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.last_compare > 0"
                            >+{{ item.last_compare }}%</span
                          >
                          <span class="green" v-else-if="item.last_compare < 0"
                            >{{ item.last_compare }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="8" style="text-align: center">
                          <div style="padding: 60px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div style="padding: 15px; text-align: right">
                  <!-- <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    v-model="cityPage"
                    :total="cityTotal"
                    :defaultPageSize="pageSize"
                    @change="citySizeChange"
                  /> -->
                </div>
              </div>
            </div>
            <!-- 省份排名 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title clearfix">
                  <span class="float-left">省份排名</span>
                </div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="45" />
                      <col width="60" />
                      <col width="405" />
                      <col width="120" />
                      <col width="120" />
                      <col width="100" />
                      <col width="100" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>-</td>
                        <td>省份</td>
                        <td style="text-align: right">读者基数</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">码洋占比</td>
                        <td style="text-align: right">上期环比</td>
                        <td style="text-align: right">上年同比</td>
                      </tr>
                    </thead>
                    <tbody v-if="showProvinceList.length > 0">
                      <tr
                        v-for="(item, index) in showProvinceList"
                        :key="index"
                      >
                        <td>{{ item.rank }}</td>
                        <td>
                          <span class="green" v-if="item.rank_compare > 0"
                            ><a-icon type="caret-down" />
                            {{ item.rank_compare }}</span
                          >
                          <span
                            class="percent"
                            v-else-if="item.rank_compare < 0"
                            ><a-icon type="caret-up" />
                            {{ item.rank_compare * -1 }}</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td>
                          <span class="main-font">{{ item.name }}</span>
                        </td>
                        <td style="text-align: right">
                          {{
                            item.reader_num
                              ? item.reader_num.toLocaleString()
                              : "--"
                          }}
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_amount.toLocaleString()
                          }}</span>
                        </td>
                        <td style="text-align: right">
                          {{ item.ratio ? item.ratio + "%" : "--" }}
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.pre_compare > 0"
                            >+{{ item.pre_compare }}%</span
                          >
                          <span class="green" v-else-if="item.pre_compare < 0"
                            >{{ item.pre_compare }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.last_compare > 0"
                            >+{{ item.last_compare }}%</span
                          >
                          <span class="green" v-else-if="item.last_compare < 0"
                            >{{ item.last_compare }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="8" style="text-align: center">
                          <div style="padding: 60px 0"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div style="padding: 15px; text-align: right">
                  <!-- <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    v-model="prvPage"
                    :total="prvTotal"
                    :defaultPageSize="pageSize"
                    @change="prvSizeChange"
                  /> -->
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style lang="scss" scoped src="@/style/scss/pages/publish/region.scss"></style>
<script>
import {
  MYREGION_INDEX,
  MYREGION_PROVINCEALL,
  MYREGION_PROVINCEDETAIL,
  MYREGION_LEVELDETAIL,
  MYREGION_CITYRANK,
  MYREGION_PROVINCERANK,
  MYREGION_LEVELPERSONA,
} from "../../apis/publish.js";
import { Scene } from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      pagePower: true,
      isLoading: true,
      dateList: [],
      yearList: [],
      isAll: 1,
      chooseYear: "",
      dateType: "",
      startDate: "",
      period: "",
      cityOption: "sale_amount",
      cityTotal: 0,
      cityPage: 1,
      pageSize: 10,
      prvTotal: 0,
      prvPage: 1,
      cityList: [],
      provinceList: [],
      allChartList: [],
      allChart: null,
      allCityList: [],
      showProvinceList: [],
      allProvinceList: [],
      provinceName: "",
      provinceInfo: {
        sale_amount: 0, // 销量
        sale_pre_compare: "", // 上月对比
        sale_last_compare: "", // 上年对比
        ratio: 0, // 占比
        pre_ratio: "", // 上月对比
        last_ratio: "", // 上年对比
      },
      provinceLineData: [],
      provinceChart: null,
      // 一二线城市
      oneCityTabKey: "1",
      oneInfo: {
        sale_amount: 0,
        city_ranks: [],
        cate_ranks: [],
      },
      oneLineData: [],
      oneChangeChart: null,
      isOneReader: true,
      oneSexList: [],
      oneSexChart: null,
      oneAgeList: [],
      oneAgeChart: null,
      oneMoneyList: [],
      oneMoneyChart: null,
      // 三四线城市
      twoCityTabKey: "1",
      twoInfo: {
        sale_amount: 0,
        city_ranks: [],
        cate_ranks: [],
      },
      twoLineData: [],
      twoChangeChart: null,
      isTwoReader: true,
      twoSexList: [],
      twoSexChart: null,
      twoAgeList: [],
      twoAgeChart: null,
      twoMoneyList: [],
      twoMoneyChart: null,
      // 五线城市
      threeCityTabKey: "1",
      threeInfo: {
        sale_amount: 0,
        city_ranks: [],
        cate_ranks: [],
      },
      threeLineData: [],
      threeChangeChart: null,
      isThreeReader: true,
      threeSexList: [],
      threeSexChart: null,
      threeAgeList: [],
      threeAgeChart: null,
      threeMoneyList: [],
      threeMoneyChart: null,
      provinceRank: 0,
    };
  },
  mounted() {
    this.yearList = this.$getYearList();
    this.yearList.unshift({
      year:"历史累计",
      value:0
    });
    this.chooseYear = this.yearList[1].value;
    this.setMonth(this.yearList[1].value);
    this.caculate();
    this.getData();
    this.getCityTrend("one");
    this.getCityTrend("two");
    this.getCityTrend("three");
    this.getCityData();
    this.getProvinceAllData();
    this.getProvinceData();
  },
  updated() {},
  methods: {
    // 整体概况
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        start_date: this.startDate,
        period: this.period,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_INDEX(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.cityList = [];
        this.provinceList = [];
        this.cityList = res.data.city_list;
        this.provinceList = res.data.province_list;
        let _arr1 = [],
          _arr2 = [],
          _arr3 = [];
        for (let i = 0; i < res.data.chart_data.length; i++) {
          let _obj1 = {
              name: "一二线城市",
              date: res.data.chart_data[i].month,
              value: res.data.chart_data[i].data.one,
              销售指数: res.data.chart_data[i].data.total,
            },
            _obj2 = {
              name: "三四线城市",
              date: res.data.chart_data[i].month,
              value: res.data.chart_data[i].data.two,
              销售指数: res.data.chart_data[i].data.total,
            },
            _obj3 = {
              name: "五线城市",
              date: res.data.chart_data[i].month,
              value: res.data.chart_data[i].data.three,
              销售指数: res.data.chart_data[i].data.total,
            };
          _arr1.push(_obj1);
          _arr2.push(_obj2);
          _arr3.push(_obj3);
        }
        this.allChartList = [..._arr1, ..._arr2, ..._arr3];
        this.$nextTick(() => {
          if (this.allChartList.length > 0) {
            if (this.allChart) {
              this.allChart.destroy();
              this.initAllChart();
            } else {
              this.initAllChart();
            }
          }
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 城市排行
    async getCityData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        period: this.period,
        start_date: this.startDate,
        sort: this.cityOption,
        page: this.cityPage,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_CITYRANK(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.cityTotal = res.data.total;
        this.allCityList = [];
        this.allCityList = res.data.result;
        // this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 全省份数据
    async getProvinceAllData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        period: this.period,
        start_date: this.startDate,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_PROVINCEALL(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.allProvinceList = [];
        this.allProvinceList = res.data;
        if (this.allProvinceList.length > 0) {
          this.provinceName = this.allProvinceList[0].name;
          this.getProvinceDetail(this.allProvinceList[0].region_id);
          this.provinceRank = this.allProvinceList[0].rank;
        } else {
          this.provinceRank = 0;
          this.provinceName = "";
          this.provinceInfo = {
            sale_amount: 0, // 销量
            sale_pre_compare: "", // 上月对比
            sale_last_compare: "", // 上年对比
            ratio: 0, // 占比
            pre_ratio: "", // 上月对比
            last_ratio: "", // 上年对比
            city_ranks: [],
            cate_ranks: [],
          };
          this.provinceLineData = [];
        }
        this.$nextTick(() => {
          this.initMap();
        });
        // this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 省份排行
    async getProvinceData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        period: this.period,
        start_date: this.startDate,
        page_size: this.pageSize,
        page: this.prvPage,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_PROVINCERANK(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.prvTotal = res.data.total;
        this.showProvinceList = [];
        this.showProvinceList = res.data.result;
        // this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 省份详情
    async getProvinceDetail(id) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        period: this.period,
        start_date: this.startDate,
        region_id: id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_PROVINCEDETAIL(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.provinceInfo = res.data;
        let _arr1 = [],
          _arr2 = [];
        this.provinceLineData = [];
        res.data.chart_data.current.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "当期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          _arr1.push(_obj);
        });
        res.data.chart_data.last.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "上年同期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          _arr2.push(_obj);
        });
        _arr1.map((value, key) => {
          if (_arr1.length > key) this.provinceLineData.push(_arr1[key]);
          if (_arr2.length > key) this.provinceLineData.push(_arr2[key]);
        });
        this.$nextTick(() => {
          if (this.provinceLineData.length > 0) {
            if (this.provinceChart) {
              this.provinceChart.destroy();
              this.initProvinceLineData();
            } else {
              this.initProvinceLineData();
            }
          }
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 城市等级销售走势
    async getCityTrend(level) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        period: this.period,
        start_date: this.startDate,
        level_type: level,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_LEVELDETAIL(data);
      if (res.code == 0) {
        this.pagePower = true;
        let _arr1 = [],
          _arr2 = [];
        res.data.chart_data.current.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "当期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          _arr1.push(_obj);
        });
        res.data.chart_data.last.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "上年同期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          _arr2.push(_obj);
        });
        if (level == "one") {
          this.oneInfo = res.data;
          this.oneLineData = [];
          _arr1.map((value, key) => {
            if (_arr1.length > key) this.oneLineData.push(_arr1[key]);
            if (_arr2.length > key) this.oneLineData.push(_arr2[key]);
          });
          this.$nextTick(() => {
            if (this.oneLineData.length > 0) {
              if (this.oneChangeChart) {
                this.oneChangeChart.destroy();
                this.initLineData("one");
              } else {
                this.initLineData("one");
              }
            }
          });
        } else if (level == "two") {
          this.twoInfo = res.data;
          this.twoLineData = [];
          _arr1.map((value, key) => {
            if (_arr1.length > key) this.twoLineData.push(_arr1[key]);
            if (_arr2.length > key) this.twoLineData.push(_arr2[key]);
          });
          this.$nextTick(() => {
            if (this.twoLineData.length > 0) {
              if (this.twoChangeChart) {
                this.twoChangeChart.destroy();
                this.initLineData("two");
              } else {
                this.initLineData("two");
              }
            }
          });
        } else if (level == "three") {
          this.threeInfo = res.data;
          this.threeLineData = [];
          _arr1.map((value, key) => {
            if (_arr1.length > key) this.threeLineData.push(_arr1[key]);
            if (_arr2.length > key) this.threeLineData.push(_arr2[key]);
          });
          this.$nextTick(() => {
            if (this.threeLineData.length > 0) {
              if (this.threeChangeChart) {
                this.threeChangeChart.destroy();
                this.initLineData("three");
              } else {
                this.initLineData("three");
              }
            }
          });
        }
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 城市等级读者画像
    async getCityReader(level) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.dateType,
        period: this.period,
        start_date: this.startDate,
        level_type: level,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYREGION_LEVELPERSONA(data);
      if (res.code == 0) {
        this.pagePower = true;
        let _total1 = 0,
          _total2 = 0,
          _total3 = 0,
          _arr1 = [],
          _arr2 = [],
          _arr3 = [];
        if (Object.keys(res.data).length > 0) {
          // 性别分布
          for (let i in res.data.persona_sex) {
            _total1 += Number(res.data.persona_sex[i].value);
          }
          if (_total1 > 0) {
            for (let i = 0; i < 3; i++) {
              let _obj = {
                value: 0,
              };
              if (i == 0) {
                _obj.name = "男性";
              } else if (i == 1) {
                _obj.name = "女性";
              } else if (i == 2) {
                _obj.name = "未知";
              }
              _arr1.push(_obj);
            }
            for (let i in res.data.persona_sex) {
              let _num =
                (Number(res.data.persona_sex[i].value) / _total1) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (res.data.persona_sex[i].name == "男") {
                _arr1[0].value = _num;
              } else if (res.data.persona_sex[i].name == "女") {
                _arr1[1].value = _num;
              } else if (res.data.persona_sex[i].name == "未知") {
                _arr1[2].value = _num;
              }
            }
          }
          // 年龄分布
          for (let i in res.data.persona_age) {
            _total2 += Number(res.data.persona_age[i].value);
          }
          if (_total2 > 0) {
            for (let i = 0; i < 6; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "18-25岁";
              } else if (i == 1) {
                _obj.name = "26-30岁";
              } else if (i == 2) {
                _obj.name = "31-35岁";
              } else if (i == 3) {
                _obj.name = "36-40岁";
              } else if (i == 4) {
                _obj.name = "41-50岁";
              } else if (i == 5) {
                _obj.name = "51岁以上";
              }
              _arr2.push(_obj);
            }
            for (let i in res.data.persona_age) {
              let _num =
                (Number(res.data.persona_age[i].value) / _total2) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (res.data.persona_age[i].name == "小年轻") {
                _arr2[0].value = _num;
              } else if (res.data.persona_age[i].name == "青年") {
                _arr2[1].value = _num;
              } else if (res.data.persona_age[i].name == "青壮年") {
                _arr2[2].value = _num;
              } else if (res.data.persona_age[i].name == "中青年") {
                _arr2[3].value = _num;
              } else if (res.data.persona_age[i].name == "中年") {
                _arr2[4].value = _num;
              } else if (res.data.persona_age[i].name == "中老年") {
                _arr2[5].value = _num;
              }
            }
          }
          // 消费能力
          for (let i in res.data.persona_money) {
            _total3 += Number(res.data.persona_money[i].value);
          }
          if (_total3 > 0) {
            for (let i = 0; i < 4; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "30元以下";
              } else if (i == 1) {
                _obj.name = "30-60元";
              } else if (i == 2) {
                _obj.name = "60-100元";
              } else if (i == 3) {
                _obj.name = "100元以上";
              }
              _arr3.push(_obj);
            }
            for (let i in res.data.persona_money) {
              let _num =
                (Number(res.data.persona_money[i].value) / _total3) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (res.data.persona_money[i].name == "低消费") {
                _arr3[0].value = _num;
              } else if (res.data.persona_money[i].name == "中低消费") {
                _arr3[1].value = _num;
              } else if (res.data.persona_money[i].name == "中高消费") {
                _arr3[2].value = _num;
              } else if (res.data.persona_money[i].name == "高消费") {
                _arr3[3].value = _num;
              }
            }
          }
        }
        if (level == "one") {
          this.oneSexList = [];
          this.oneAgeList = [];
          this.oneMoneyList = [];
          this.oneSexList = _arr1;
          this.oneAgeList = _arr2;
          this.oneMoneyList = _arr3;
          this.$nextTick(() => {
            if (this.oneSexList.length > 0) {
              if (this.oneSexChart) {
                this.oneSexChart.destroy();
                this.initSexRing("one");
              } else {
                this.initSexRing("one");
              }
            }
            if (this.oneAgeList.length > 0) {
              if (this.oneAgeChart) {
                this.oneAgeChart.destroy();
                this.initAgeColumn("one");
              } else {
                this.initAgeColumn("one");
              }
            }
            if (this.oneMoneyList.length > 0) {
              if (this.oneMoneyChart) {
                this.oneMoneyChart.destroy();
                this.initMoneyRing("one");
              } else {
                this.initMoneyRing("one");
              }
            }
            // this.isOneReader = false;
          });
        } else if (level == "two") {
          this.twoSexList = [];
          this.twoAgeList = [];
          this.twoMoneyList = [];
          this.twoSexList = _arr1;
          this.twoAgeList = _arr2;
          this.twoMoneyList = _arr3;
          this.$nextTick(() => {
            if (this.twoSexChart) {
              this.twoSexChart.destroy();
              this.initSexRing("two");
            } else {
              this.initSexRing("two");
            }
            if (this.twoAgeChart) {
              this.twoAgeChart.destroy();
              this.initAgeColumn("two");
            } else {
              this.initAgeColumn("two");
            }
            if (this.twoMoneyChart) {
              this.twoMoneyChart.destroy();
              this.initMoneyRing("two");
            } else {
              this.initMoneyRing("two");
            }
          });
        } else if (level == "three") {
          this.threeSexList = [];
          this.threeAgeList = [];
          this.threeMoneyList = [];
          this.threeSexList = _arr1;
          this.threeAgeList = _arr2;
          this.threeMoneyList = _arr3;
          this.$nextTick(() => {
            if (this.threeSexChart) {
              this.threeSexChart.destroy();
              this.initSexRing("three");
            } else {
              this.initSexRing("three");
            }
            if (this.threeAgeChart) {
              this.threeAgeChart.destroy();
              this.initAgeColumn("three");
            } else {
              this.initAgeColumn("three");
            }
            if (this.threeMoneyChart) {
              this.threeMoneyChart.destroy();
              this.initMoneyRing("three");
            } else {
              this.initMoneyRing("three");
            }
          });
        }
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    setMonth(year) {
      // console.log(year);
      let _arr = [];
      for (let i = 0; i < 12; i++) {
        let _month = i + 1;
        let diffs = Number(this.$moment().format("MM"));
        let _obj = {
          date: i + 1,
          active: false,
          disabled: false,
        };
        if (Number(year) == Number(this.$moment().format("YYYY"))) {
          if (diffs > _month) {
          } else if (diffs == _month) {
            // _obj.active = true;
          } else {
            _obj.disabled = true;
          }
        }
        _arr.push(_obj);
      }
      this.isAll = 1;
      this.dateList = [];
      this.dateList = _arr;
      // console.log(_arr)
    },
    changeTime() {
      this.cityPage = 1;
      this.prvPage = 1;
      this.getData();
      if (this.oneCityTabKey == "1") {
        this.getCityTrend("one");
      } else if (this.oneCityTabKey == "2") {
        this.getCityReader("one");
      }
      if (this.twoCityTabKey == "1") {
        this.getCityTrend("two");
      } else if (this.twoCityTabKey == "2") {
        this.getCityReader("two");
      }
      if (this.threeCityTabKey == "1") {
        this.getCityTrend("three");
      } else if (this.threeCityTabKey == "2") {
        this.getCityReader("three");
      }
      this.getCityData();
      this.getProvinceAllData();
      this.getProvinceData();
    },
    yearChange(value) {
      this.isLoading = true;
      this.chooseYear = value;
      if (value == 0) {
        this.dateList = this.dateList.map((value, key) => {
          value.active = false;
          value.disabled = true;
          return value;
        });
        this.isAll = 2;
      } else {
        this.setMonth(value);
      }
      this.caculate();
      this.changeTime();
    },
    monthChange(month, index) {
      if (month == 0) {
        if (this.chooseYear !== 0) {
          this.isLoading = true;
          this.dateList = this.dateList.map((value, key) => {
            value.active = false;
            return value;
          });
          this.isAll = 1;
          this.caculate();
          this.changeTime();
        }
      } else {
        if (!month.disabled) {
          this.isLoading = true;
          this.isAll = 0;
          this.dateList = this.dateList.map((value, key) => {
            value.active = false;
            if (key == index) {
              value.active = true;
            }
            return value;
          });
          this.caculate();
          this.changeTime();
        }
      }
    },
    caculate() {
      if (this.chooseYear == 0) {
        this.dateType = 0;
        this.period = 0;
        this.startDate = 0;
      } else {
        if (this.isAll == 1) {
          this.dateType = 4;
          this.period = this.chooseYear;
          this.startDate = this.chooseYear + "0101";
        } else {
          let _month;
          this.dateList.map((value, key) => {
            if (value.active) {
              _month = value.date;
            }
          });
          if (Number(_month) < 10) {
            _month = "0" + _month;
          }
          this.dateType = 3;
          this.period = this.chooseYear + _month;
          this.startDate = this.chooseYear + _month + "01";
        }
      }
    },
    changeProveince(item) {
      this.provinceName = item.name;
      this.provinceRank = item.rank;
      this.getProvinceDetail(item.region_id);
    },
    oneCityCallback(key) {
      this.oneCityTabKey = key;
      if (key == "1") {
        this.getCityTrend("one");
      } else if (key == "2") {
        this.getCityReader("one");
      }
    },
    twoCityCallback(key) {
      this.twoCityTabKey = key;
      if (key == "1") {
        this.getCityTrend("two");
      } else if (key == "2") {
        this.getCityReader("two");
      }
    },
    threeCityCallback(key) {
      this.threeCityTabKey = key;
      if (key == "1") {
        this.getCityTrend("three");
      } else if (key == "2") {
        this.getCityReader("three");
      }
    },
    handleChange(value) {
      this.cityOption = value;
      this.getCityData();
    },
    citySizeChange(current, pageSize) {
      this.cityPage = current;
      this.getCityData();
    },
    prvSizeChange(current, pageSize) {
      this.prvPage = current;
      this.getProvinceData();
    },
    // 渲染整体概况图
    initAllChart() {
      this.allChart = new Chart({
        container: "all-line-chart",
        autoFit: true,
        height: 300,
      });

      this.allChart.data(this.allChartList);
      this.allChart.scale({
        value: {
          nice: true,
          min: 0,
        },
        销售指数: {
          nice: true,
          min: 0,
        },
      });
      this.allChart.tooltip({
        showMarkers: false,
        shared: true,
      });
      this.allChart.legend({
        custom: true,
        items: [
          {
            value: "一二线城市",
            name: "一二线城市",
            marker: { symbol: "square", style: { fill: "#D5A74D", r: 5 } },
          },
          {
            value: "三四线城市",
            name: "三四线城市",
            marker: { symbol: "square", style: { fill: "#DECE24", r: 5 } },
          },
          {
            value: "五线城市",
            name: "五线城市",
            marker: { symbol: "square", style: { fill: "#CADE70", r: 5 } },
          },
          {
            value: "销售指数",
            name: "销售指数",
            marker: { symbol: "square", style: { fill: "#5A8BEE", r: 5 } },
          },
        ],
      });
      this.allChart
        .interval()
        .position("date*value")
        .color("name", (name) => {
          if (name == "一二线城市") {
            return "#D5A74D";
          } else if (name == "三四线城市") {
            return "#DECE24";
          } else {
            return "#CADE70";
          }
        })
        .adjust([
          {
            type: "dodge",
            marginRatio: 0.4,
          },
        ])
        .size(15);
      this.allChart
        .line()
        .position("date*销售指数")
        .color("#5A8BEE")
        .size(2)
        .shape("circle");
      this.allChart
        .point()
        .position("date*销售指数")
        .color("#5A8BEE")
        .size(3)
        .shape("circle");
      this.allChart.interaction("element-highlight-by-x");
      this.allChart.interaction("active-region");
      this.allChart.interaction("element-active");
      this.allChart.interaction("legend-visible-filter");
      this.allChart.render();
    },
    // 省份数据折线图
    initProvinceLineData() {
      let _chart, data;
      this.provinceChart = new Chart({
        container: "city-line",
        autoFit: false,
        width: 460,
        height: 80,
      });
      data = this.provinceLineData;
      _chart = this.provinceChart;

      _chart.data(data);
      _chart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      _chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      _chart.axis("month", {
        tickLine: null,
        label: {
          autoHide: false | true,
          autoRotate: false,
        },
      });
      _chart.axis("temperature", {
        tickLine: null,
        line: null,
        label: {
          formatter: (val) => {
            return "";
          },
        },
      });
      _chart.legend(false);
      _chart
        .line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .shape("circle")
        .style({ lineWidth: 2 })
        .tooltip("month*temperature*city", function (month, temperature, city) {
          return {
            title: month,
            name: city,
            value: temperature,
          };
        });

      _chart
        .point()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .tooltip(false)
        .shape("circle");

      _chart.render();
    },
    // 城市折线图
    initLineData(level) {
      let _chart, data;
      if (level == "one") {
        this.oneChangeChart = new Chart({
          container: "one-city-trend",
          autoFit: false,
          width: 680,
          height: 160,
        });
        data = this.oneLineData;
        _chart = this.oneChangeChart;
      } else if (level == "two") {
        this.twoChangeChart = new Chart({
          container: "two-city-trend",
          autoFit: false,
          width: 680,
          height: 160,
        });
        data = this.twoLineData;
        _chart = this.twoChangeChart;
      } else if (level == "three") {
        this.threeChangeChart = new Chart({
          container: "three-city-trend",
          autoFit: false,
          width: 680,
          height: 160,
        });
        data = this.threeLineData;
        _chart = this.threeChangeChart;
      }

      _chart.data(data);
      _chart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      _chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      _chart.axis("month", {
        tickLine: null,
        label: {
          autoHide: false | true,
          autoRotate: false,
        },
      });
      _chart.axis("temperature", {
        tickLine: null,
        line: null,
        label: {
          formatter: (val) => {
            return val;
          },
        },
      });
      _chart.legend(false);
      _chart
        .line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .shape("circle")
        .style({ lineWidth: 2 })
        .tooltip("month*temperature*city", function (month, temperature, city) {
          return {
            title: month,
            name: city,
            value: temperature,
          };
        });

      _chart
        .point()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .tooltip(false)
        .shape("circle");

      _chart.render();
    },
    // 性别分布饼图
    initSexRing(level) {
      let _chart, data;
      if (level == "one") {
        data = this.oneSexList;
        this.oneSexChart = new Chart({
          container: "ring1",
          autoFit: true,
          padding: [-80, 0, 0, 0],
          height: 234,
        });
        _chart = this.oneSexChart;
      } else if (level == "two") {
        data = this.twoSexList;
        this.twoSexChart = new Chart({
          container: "ring2",
          autoFit: true,
          padding: [-80, 0, 0, 0],
          height: 234,
        });
        _chart = this.twoSexChart;
      } else if (level == "three") {
        data = this.threeSexList;
        this.threeSexChart = new Chart({
          container: "ring3",
          autoFit: true,
          padding: [-80, 0, 0, 0],
          height: 234,
        });
        _chart = this.threeSexChart;
      }
      _chart.data(data);
      _chart.legend(false);
      _chart.tooltip(false);
      _chart.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "男性") {
            color = "#2B6AE7";
          } else if (data[0].name === "女性") {
            color = "#EA5D73";
          } else if (data[0].name === "未知") {
            color = "#FF8C3F";
          }
          data.push({ name: "其他", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 23,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      _chart.render();
    },
    // 年龄分布柱状图
    initAgeColumn(level) {
      let _chart,
        data = [],
        _arr = [],
        _list = [];
      if (level == "one") {
        _list = this.oneAgeList;
        this.oneAgeChart = new Chart({
          container: "column1",
          autoFit: true,
          autoHide: false,
          padding: [10, 0, 0, 0],
          height: 140,
        });
        _chart = this.oneAgeChart;
      } else if (level == "two") {
        _list = this.twoAgeList;
        this.twoAgeChart = new Chart({
          container: "column2",
          autoFit: true,
          autoHide: false,
          padding: [10, 0, 0, 0],
          height: 140,
        });
        _chart = this.twoAgeChart;
      } else if (level == "three") {
        _list = this.threeAgeList;
        this.threeAgeChart = new Chart({
          container: "column3",
          autoFit: true,
          autoHide: false,
          padding: [10, 0, 0, 0],
          height: 140,
        });
        _chart = this.threeAgeChart;
      }
      _list.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ..._list];
      _chart.data(data);
      _chart.scale("value", {
        nice: true,
      });
      _chart.axis(false);
      _chart.axis(false);
      _chart.tooltip(false);
      _chart.interaction("active-region");
      _chart.legend(false);
      _chart
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == _list[0].name && type == "this") {
            return "#7079E0";
          } else if (val == _list[1].name && type == "this") {
            return "#D15B7E";
          } else if (val == _list[2].name && type == "this") {
            return "#FC6E6C";
          } else if (val == _list[3].name && type == "this") {
            return "#FFA06B";
          } else if (val == _list[4].name && type == "this") {
            return "#FFB64D";
          } else if (val == _list[5].name && type == "this") {
            return "#FFDB3F";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      _chart.render();
    },
    // 消费柱状图
    initMoneyRing(level) {
      let _chart,
        data = [],
        _arr = [],
        _list = [];
      if (level == "one") {
        _list = this.oneMoneyList;
        this.oneMoneyChart = new Chart({
          container: "money1",
          autoFit: true,
          autoHide: false,
          padding: [10, 0, 0, 0],
          height: 140,
        });
        _chart = this.oneMoneyChart;
      } else if (level == "two") {
        _list = this.twoMoneyList;
        this.twoMoneyChart = new Chart({
          container: "money2",
          autoFit: true,
          autoHide: false,
          padding: [10, 0, 0, 0],
          height: 140,
        });
        _chart = this.twoMoneyChart;
      } else if (level == "three") {
        _list = this.threeMoneyList;
        this.threeMoneyChart = new Chart({
          container: "money3",
          autoFit: true,
          autoHide: false,
          padding: [10, 0, 0, 0],
          height: 140,
        });
        _chart = this.threeMoneyChart;
      }
      _list.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ..._list];
      _chart.data(data);
      _chart.scale("value", {
        nice: true,
      });
      _chart.axis(false);
      _chart.axis(false);
      _chart.tooltip(false);
      _chart.interaction("active-region");
      _chart.legend(false);
      _chart
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == "30元以下" && type == "this") {
            return "#26A4D0";
          } else if (val == "30-60元" && type == "this") {
            return "#4179EA";
          } else if (val == "60-100元" && type == "this") {
            return "#685FA7";
          } else if (val == "100元以上" && type == "this") {
            return "#F5A726";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      _chart.render();
    },
    // 渲染地图
    initMap() {
      let _this = this,
        _layer;
      const scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          center: [116.2825, 39.9],
          pitch: 0,
          style: "blank",
          autoFit: true,
          zoom: 3,
          minZoom: 1,
          maxZoom: 10,
        }),
      });
      scene.setMapStatus({
        dragEnable: false, //是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false, // 旋转
      });
      const attachMapContainer = document.createElement("div");
      attachMapContainer.id = "attach";
      attachMapContainer.style.cssText =
        "position: absolute;height:80px;width:50px;right:50px;bottom:20px;border:1px solid #F4F7FD;";
      document.getElementById("map").parentElement.append(attachMapContainer);

      scene.on("loaded", () => {
        _layer = new CountryLayer(scene, {
          data: [],
          joinBy: ["NAME_CHN", "name"],
          depth: 1,
          provinceStroke: "#FFF",
          stroke: "#D1DDF5",
          countyStroke: "#FFF",
          cityStroke: "#FFF",
          cityStrokeWidth: 0,
          // chinaNationalWidth: 0,
          coastlineWidth: 0,
          chinaNationalStroke: "#D1DDF5",
          label: {
            enable: false,
          },
          fill: {
            color: {
              field: "NAME_CHN",
              values:
                ("name",
                function (value) {
                  let _arr = _this.allProvinceList;
                  if (_arr[0] && value.indexOf(_arr[0].name) > -1) {
                    return "#4777D8";
                  } else if (_arr[1] && value.indexOf(_arr[1].name) > -1) {
                    return "#6E94E1";
                  } else if (_arr[2] && value.indexOf(_arr[2].name) > -1) {
                    return "#82A3E5";
                  } else if (_arr[3] && value.indexOf(_arr[3].name) > -1) {
                    return "#96B2E8";
                  } else if (_arr[4] && value.indexOf(_arr[4].name) > -1) {
                    return "#A0B9EA";
                  } else {
                    return "#D1DDF5";
                  }
                }),
            },
            activeColor: "#4777D8",
          },
          popup: {
            enable: true,
            Html: (props) => {
              // return `<span>${props.NAME_CHN}</span>`;
              let _name = props.NAME_CHN,
                _num = 0;
              _this.allProvinceList.map((value, key) => {
                if (_name.indexOf(value.name) > -1) {
                  _num = value.sale_amount;
                }
              });
              return `<span>${props.NAME_CHN}<br>销售指数：${_num}</span>`;
            },
            // lnglat :[116.2825, 39.9]
          },
        });
      });

      // 添加附图，附图需要和主图保持一致
      const scene2 = new Scene({
        id: "attach",
        logoVisible: false,
        map: new Mapbox({
          center: [113.60540108435657, 12.833692637803168],
          pitch: 0,
          style: "blank",
          zoom: 1.93,
          minZoom: 0,
          maxZoom: 3,
          interactive: false,
        }),
      });
      scene2.on("loaded", () => {
        new CountryLayer(scene2, {
          data: [],
          label: {
            enable: false,
          },
          popup: {
            enable: true,
          },
          autoFit: false,
          depth: 1,
          fill: {
            color: {
              field: "NAME_CHN",
              values: [
                "#feedde",
                "#fdd0a2",
                "#fdae6b",
                "#fd8d3c",
                "#e6550d",
                "#a63603",
              ],
            },
          },
        });
      });
    },
    // 头部切换机构触发
    publisherChange() {
      this.isLoading = true;
      this.cityOption = "sale_amount";
      this.isAll = 1;
      this.cityPage = 1;
      this.prvPage = 1;
      this.oneCityTabKey = "1";
      this.twoCityTabKey = "1";
      this.threeCityTabKey = "1";
      this.yearList = this.$getYearList();
      this.yearList.unshift({
        year:"历史累计",
        value:0
      });
      this.chooseYear = this.yearList[1].value;
      this.setMonth(this.yearList[1].value);
      this.caculate();
      this.getData();
      this.getCityTrend("one");
      this.getCityTrend("two");
      this.getCityTrend("three");
      this.getCityData();
      this.getProvinceAllData();
      this.getProvinceData();
    },
  },
};
</script>
